<template>
  <div class="container">
	<select id="chartSelect" @change="redraw" v-model="selectValue" style="position: absolute;z-index:10000;margin-top:5px;margin-left:160px;">
		<option value="7">7天</option>
		<option value="30">30天</option>
		<option value="90">90天</option>
		<option value="180">180天</option>
	</select>
	<div id="myChart" style="width:1000px; height: 500px"></div>
  </div>
  
</template>
<script>
import { FriLink } from '@/model/friLink'

import * as echarts from 'echarts';

export default {
  data() {
    return {
      selectValue: 7,
      dts: [],
      addPos: [],
    }
  },
  
  name: "chart",
  props: {
    //chartId: "aaaaa",
    xData: Array,
    // itemData: Array,
    series: Array,
    legend: Object
  },
  
  watch: {
    // xData: function(val){
    //   this.renderChart();
    // },
    series: function(val) {
      this.renderChart();
    }
  },
  mounted() {

    this.drawLine(this.selectValue);

  },
  
  methods: {
	redraw(){
		this.drawLine(this.selectValue)
    },
	// 渲染折线图
	async drawLine (day) {
	    console.info(day)
		
		this.dts=[];
		this.addPos=[];
	  
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('myChart'));
		
		const pList = await FriLink.posAddCt(day)
		//[{"id":1,"name":"Java开发","pos_num":3},{"id":13,"name":"python开发","pos_num":1},{"id":2,"name":"C++开发","pos_num":1},{"id":18,"name":"其他","pos_num":1}]
		console.info(222)
			console.info(pList)
		console.info(222)
		for (let i = 0; i < pList.length; ++i) {
		
			this.dts.push(pList[i].dt);
				
			this.addPos.push(pList[i].pos_add_num)

		}
		
		
		
		// 绘制图表
		myChart.setOption({
			  title: {
				text: '新增职位动态曲线'
			  },
			  tooltip: {
				trigger: 'axis'
			  },
			  legend: {
				data: ['新增职位']
			  },
			  grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			  },
			  toolbox: {
				feature: {
				  saveAsImage: {}
				}
			  },
			  xAxis: {
				type: 'category',
				boundaryGap: false,
				//data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				data: this.dts
			  },
			  yAxis: {
				type: 'value'
			  },
			  series: [
				{
				  name: '新增职位',
				  type: 'line',
				  stack: 'Total',
				  //data: [220, 182, 191, 234, 290, 330, 310]
				  data: this.addPos
				}
			  ]
  
		});
	}
  
    
  
  },
}
</script>

<style lang="scss" scoped>

</style>
